import React, { useState, useEffect } from 'react';
import { Card, Button, Space, Typography, message, Statistic } from 'antd';
import { CalendarOutlined, GiftOutlined, TrophyOutlined } from '@ant-design/icons';
import { dailyCheckin, getCheckinStatus, getCheckinStreak } from '../api/checkin';

const { Text } = Typography;

const CheckinCard: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [hasCheckedToday, setHasCheckedToday] = useState(false);
  const [todayReward, setTodayReward] = useState(0);
  const [streak, setStreak] = useState(0);
  const [totalDays, setTotalDays] = useState(0);

  useEffect(() => {
    loadData();
  }, []);

  const loadData = async () => {
    try {
      await Promise.all([
        loadCheckinStatus(),
        loadCheckinStreak()
      ]);
    } catch (error) {
      console.error('加载签到数据失败:', error);
    }
  };

  const loadCheckinStatus = async () => {
    try {
      const response = await getCheckinStatus();
      if (response.code === 200) {
        setHasCheckedToday(response.data.hasChecked);
        setTodayReward(response.data.todayReward || 0);
      }
    } catch (error) {
      console.error('获取签到状态失败:', error);
    }
  };

  const loadCheckinStreak = async () => {
    try {
      const response = await getCheckinStreak();
      if (response.code === 200) {
        setStreak(response.data.streak);
        setTotalDays(response.data.totalDays);
      }
    } catch (error) {
      console.error('获取签到天数失败:', error);
    }
  };

  const handleCheckin = async () => {
    setLoading(true);
    try {
      const response = await dailyCheckin();
      if (response.code === 200) {
        const rewardPoints = response.data.rewardPoints;
        message.success(`签到成功！获得 ${rewardPoints} 魔力值`);
        setHasCheckedToday(true);
        setTodayReward(rewardPoints);
        // 重新加载连续签到天数
        await loadCheckinStreak();
      } else {
        message.error(response.message || '签到失败');
      }
    } catch (error) {
      console.error('签到异常:', error);
      message.error('签到失败，请稍后重试');
    } finally {
      setLoading(false);
    }
  };

  return (
    <Card 
      title={
        <Space>
          <CalendarOutlined />
          <span>每日签到</span>
        </Space>
      }
      size="small"
      style={{ width: '100%' }}
    >
      <Space direction="vertical" style={{ width: '100%' }}>
        {/* 签到按钮 */}
        <div style={{ textAlign: 'center' }}>
          {hasCheckedToday ? (
            <div>
              <Button 
                type="default" 
                disabled 
                icon={<GiftOutlined />}
                size="large"
                style={{ marginBottom: 8 }}
              >
                今日已签到
              </Button>
              <div>
                <Text type="secondary">
                  今日获得 <span style={{ color: '#52c41a', fontWeight: 'bold' }}>{todayReward}</span> 魔力值
                </Text>
              </div>
            </div>
          ) : (
            <Button 
              type="primary" 
              loading={loading}
              onClick={handleCheckin}
              icon={<GiftOutlined />}
              size="large"
              style={{ marginBottom: 8 }}
            >
              立即签到
            </Button>
          )}
        </div>

        {/* 签到统计 */}
        <div style={{ borderTop: '1px solid #f0f0f0', paddingTop: 12 }}>
          <Space split={<div style={{ width: 1, height: 20, backgroundColor: '#f0f0f0' }} />}>
            <div style={{ textAlign: 'center', flex: 1 }}>
              <div style={{ fontSize: '20px', fontWeight: 'bold', color: '#1890ff' }}>
                {streak}
              </div>
              <Text type="secondary" style={{ fontSize: '12px' }}>连续天数</Text>
            </div>
            <div style={{ textAlign: 'center', flex: 1 }}>
              <div style={{ fontSize: '20px', fontWeight: 'bold', color: '#52c41a' }}>
                {totalDays}
              </div>
              <Text type="secondary" style={{ fontSize: '12px' }}>累计天数</Text>
            </div>
          </Space>
        </div>

        {/* 签到奖励说明 */}
        <div style={{ fontSize: '12px', color: '#666', textAlign: 'center' }}>
          <Space direction="vertical" size={2}>
            <Text type="secondary">
              <TrophyOutlined /> 连续签到奖励更丰厚
            </Text>
            <Text type="secondary">每日签到可获得魔力值奖励</Text>
          </Space>
        </div>
      </Space>
    </Card>
  );
};

export default CheckinCard; 